<!-- 能耗趋势分析 -->

<template>
  <div class="flex flex-col w-full p-10px box-border" style="height: calc(100% - 40px)">
    <!-- card -->
    <div
      class="flex-1 flex flex-col h-100%"
      style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
    >
      <div class="h-50px lh-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">石化基地能耗趋势分析</span>
      </div>
      <div class="w-full" style="height: calc(100% - 50px)">
        <!--查询表单 -->
        <el-form
          :inline="true"
          class="m-20px pl-30px pr-30px border-0 border-b border-solid border-#E0E0E0"
        >
          <el-form-item label="选择企业">
            <el-select v-model="qymc" placeholder="请选择企业">
              <el-option
                v-for="item in qyOption"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择能源类型">
            <el-select v-model="nylx" placeholder="请选择能源类型">
              <el-option
                v-for="item in nylxOption"
                :key="item.dm"
                :label="item.mc"
                :value="item.dm"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择立项时间">
            <el-date-picker
              v-model="date"
              type="daterange"
              range-separator="至"
              unlink-panels
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="dateChangeFormat(date)"
            />
          </el-form-item>

          <div class="mt-2px float-right">
            <el-button type="primary" class="w-80px rounded-15px" :icon="Search" @click="loadChart"
              >查询</el-button
            >
            <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh" @click="resetChart"
              >重置</el-button
            >
          </div>
        </el-form>

        <div class="w-100%" style="height: calc(100% - 170px)">
          <Echarts ref="chartRef"></Echarts>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts'
import { Search, Refresh } from '@element-plus/icons-vue'
import moment from 'moment'
import { dateChangeFormat } from '@/utils/date'

const qymc = ref('')
const nylx = ref('2')
const date = ref([
  moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
  moment().format('YYYY-MM-DD HH:mm:ss'),
])

const qyOption: any = ref([])
const nylxOption: any = ref([])
function getDictionary() {
  queryQymcInfoList().then((res: any) => {
    qyOption.value = res
  })

  queryZdInfo({ zdxdm: 'nylx' }).then((res: any) => {
    nylxOption.value = res
  })
}
getDictionary()

const chartRef: any = ref(null)
const chartOption: any = {
  grid: {
    top: 100,
    left: '8%',
    right: '12%',
    bottom: 60,
  },
  graphic: [],
  legend: {
    left: 'left',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  xAxis: [
    {
      // type: 'category',
      data: [],
      axisPointer: {
        type: 'shadow',
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
    {
      type: 'value',
    },
  ],
  series: [],
}

onMounted(() => {
  chartOption.graphic = [
    {
      type: 'text',
      left: 0,
      style: {
        text: '单位产值综合能耗 tce/元',
        textAlign: 'center',
        fill: '#000',
        fontSize: 14,
      },
    },
    {
      type: 'text',
      right: 40,
      style: {
        text: '单位产值电耗 kWh/元',
        textAlign: 'center',
        fill: '#000',
        fontSize: 14,
      },
    },
    {
      type: 'text',
      left: 'center',
      top: 'middle',
      style: {
        fill: '#999',
        text: '暂无数据',
        font: '14px Microsoft YaHei',
      },
    },
  ]
  chartRef.value.initEchat(chartOption)
})

function loadChart() {
  const params = {
    qymc: qymc.value,
    nylx: nylx.value,
    startTime: date.value[0],
    endTime: date.value[1],
    ymlx: 2,
  }
  queryYqDwCzInfoList(params).then((res: any) => {
    chartOption.xAxis[0].data = []
    chartOption.series = []

    let graphicText1 = ''
    let graphicText2 = ''
    const seriesData = res.dwHistoryInfoList.map((item: any, index: any) => {
      if (item.ylx === '综合能耗总量') {
        graphicText1 = `${item.ylx}/${item.ylxDw}`
        return {
          name: item.ylx,
          type: 'bar',
          barWidth: 14,
          borderRadius: '25%',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#47cecd' },
              { offset: 1, color: '#03a3a2' },
            ]),
          },
          tooltip: {
            valueFormatter: function (value: any) {
              return value + '/万tce'
            },
          },
          data: item.ylz ? item.ylz : [],
        }
      }
      graphicText2 = `${item.ylx}/${item.ylxDw}`
      return {
        name: item.ylx,
        type: 'line',
        yAxisIndex: 1,
        itemStyle: {
          normal: {
            color: '#0F86E8',
            lineStyle: {
              color: '#0F86E8',
            },
          },
        },
        tooltip: {
          valueFormatter: function (value: any) {
            return value + '/kWh'
          },
        },
        data: item.ylz ? item.ylz : [],
      }
    })

    chartOption.graphic = []
    if (res.sjList.length < 1) {
      chartOption.graphic.push({
        type: 'text',
        left: 'center',
        top: 'middle',
        style: {
          fill: '#999',
          text: '暂无数据',
          font: '14px Microsoft YaHei',
        },
      })
    } else {
      chartOption.graphic = [
        {
          type: 'text',
          right: 40,
          top: 'center',
          style: {
            text: graphicText1,
            textAlign: 'center',
            fill: '#000',
            fontSize: 14,
          },
        },
        {
          type: 'text',
          left: 0,
          top: 'center',
          style: {
            text: graphicText2,
            textAlign: 'center',
            fill: '#000',
            fontSize: 14,
          },
        },
      ]
    }

    chartOption.xAxis[0].data = res.sjList ? res.sjList : []
    chartOption.series = seriesData

    chartRef.value.initEchat(chartOption)
  })
}
loadChart()

const resetChart = () => {
  qymc.value = ''
  nylx.value = '2'
  date.value[0] = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
  date.value[1] = moment().format('YYYY-MM-DD HH:mm:ss')

  loadChart()
}
</script>

<style></style>
